<template>
  <el-row class="container">
    <el-row class="crumbs">酒店 > 酒店预订</el-row>
    <el-row class="query-price">
      <el-col :span="5">
        <el-autocomplete
          class="inline-input"
          v-model="city.name"
          :fetch-suggestions="querySearch"
          placeholder="切换城市"
          :trigger-on-focus="false"
          :highlight-first-item="true"
          @select="setCity"
        ></el-autocomplete>
      </el-col>
      <el-col :span="10">
        <el-date-picker
          v-model="date"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="入住日期"
          end-placeholder="离店日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-col>
      <el-col :span="5" class="ra">
        <el-input
          readonly
          placeholder="人数未定"
          suffix-icon="el-icon-user"
          v-model="countDesc"
          @click.native="showOrHideRoompersonWapper"
        ></el-input>
        <el-collapse-transition>
          <el-row class="roompersonWapper" v-show="showRoomQuery">
            <el-row class="select" type="flex" justify="space-between">
              <span>每间</span>
              <el-row class="select-person">
                <el-select v-model="personNum" placeholder="请选择" size="mini" @change="changePerson">
                  <el-option
                    v-for="item in personOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="childrenNum"
                  placeholder="请选择"
                  size="mini"
                  @change="changeChild"
                >
                  <el-option
                    v-for="item in childrenOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-row>
            </el-row>
            <el-row class="btnWapper">
              <el-button type="primary" size="mini" @click="submitCountDesc">确定</el-button>
            </el-row>
          </el-row>
        </el-collapse-transition>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="getCity">查看价格</el-button>
      </el-col>
    </el-row>
    <el-row class="areaWapper">
      <el-col :span="14">
        <el-row class="area-top">
          <el-row class="area">
            <el-col :span="2">区域：</el-col>
            <el-col :span="22">
              <div class="addr" v-if="cityList" ref="addr">
                <span
                  class="addr-item"
                  v-for="(item,index) in cityList[0].scenics"
                  :key="index"
                >{{item.name}}</span>
              </div>
              <el-row class="swtch" v-if="cityList">
                <span>
                  <i class="el-icon-d-arrow-right" @click="changeAddrStyle"></i>
                </span>
                等{{cityList[0].scenics.length}}个区域
              </el-row>
            </el-col>
          </el-row>
          <el-row class="price">
            <el-col :span="3">
              均价
              <el-tooltip content="等级均价由平日价格计算得出，节假日价格会有上浮。" placement="top-start">
                <span>?</span>
              </el-tooltip>：
            </el-col>
            <el-col :span="21">
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <span class="evaluate">
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <b>¥332</b>
                </span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <span class="evaluate">
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <b>¥332</b>
                </span>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
                placement="bottom"
              >
                <span class="evaluate">
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <i class="iconfont iconhuangguan"></i>
                  <b>¥332</b>
                </span>
              </el-tooltip>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="10" class="mapWapper">
        <el-row
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div id="container" class="map"></div>
        </el-row>
      </el-col>
    </el-row>
    <el-row class="chooseWapper">
      <el-col :span="5">
        <el-row>
          <el-row class="desc" type="flex" justify="space-between">
            <span>价格</span>
            <b>0-4000</b>
          </el-row>
          <el-row class="progress">
            <el-slider v-model="price_lt" :max="4000" @change="setPriceLt"></el-slider>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="4">
        <el-row class="desc">住宿等级</el-row>
        <el-dropdown @command="setLevels">
          <span class="el-dropdown-link">
            <b>{{hotellevel_inDesc}}</b>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'"
              v-for="(item,index) in optionsList.levels"
              :key="index"
              :command="item"
            >{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">
        <el-row class="desc">住宿类型</el-row>
        <el-dropdown @command="setTypes">
          <span class="el-dropdown-link">
            <b>{{hoteltype_inDesc}}</b>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'"
              v-for="(item,index) in optionsList.types"
              :key="index"
              :command="item"
            >{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">
        <el-row class="desc">酒店设施</el-row>
        <el-dropdown @command="setAssets">
          <span class="el-dropdown-link">
            <b>{{hotelasset_inDesc}}</b>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'"
              v-for="(item,index) in optionsList.assets"
              :key="index"
              :command="item"
            >{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="4">
        <el-row class="desc">酒店品牌</el-row>
        <el-dropdown @command="setBrands">
          <span class="el-dropdown-link">
            <b>{{hotelbrand_inDesc}}</b>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="dropdown">
            <el-dropdown-item
              :icon="item.isChoose ? 'el-icon-circle-check':'iconfont iconcircle'"
              v-for="(item,index) in optionsList.brands"
              :key="index"
              :command="item"
            >{{item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="clearHotelQuery">撤销条件</el-button>
      </el-col>
    </el-row>
    <el-row
      class="hotelWapper"
      v-if="hotelList.length > 0"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-row
        type="flex"
        justify="space-between"
        class="hotel-item"
        v-for="(item,index) in hotelList"
        :key="index"
      >
        <el-row class="pic">
          <img :src="item.photos" alt />
        </el-row>
        <el-row class="desc" type="flex" justify="space-between">
          <el-row class="hotel-desc">
            <h1 @click="$router.push('/hotel/'+item.id+'.html')">{{item.name}}</h1>
            <el-row class="eng">
              {{item.alias}}
              <span class="type">
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <b>经济型</b>
              </span>
            </el-row>
            <el-row class="evaluate">
              <el-rate :value="item.stars" disabled></el-rate>
              <b>{{item.stars}}分</b>
              <span>
                <em>{{item.ranComment}}</em>条评价
              </span>
              <span>
                <em>{{item.ranTravels}}</em>篇游记
              </span>
            </el-row>
            <el-row class="location">
              <i class="el-icon-location"></i>
              位于: {{item.address}}
            </el-row>
          </el-row>
          <el-row class="link" v-if="item.products">
            <a href="https://hotels.ctrip.com/hotel/694679.html" class="strike">
              <el-row
                class="hotel-link"
                type="flex"
                justify="space-between"
                v-for="(it,index) in item.products"
                :key="index"
              >
                <span>{{it.name}}</span>
                <em>
                  <b>￥{{it.price}}</b>起
                  <i class="el-icon-arrow-right"></i>
                </em>
              </el-row>
            </a>
          </el-row>
        </el-row>
      </el-row>
    </el-row>
    <el-row class="no-content" v-if="hotelList.length <= 0">暂无数据~~</el-row>
    <el-row class="page-box" v-if="hotelList.length > 0">
      <el-pagination
        align="right"
        small
        layout="prev, pager, next"
        :current-page="pageIndex"
        :page-size="pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-row>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      total: 0,
      pageIndex: 1,
      pageSize: 5,
      showRoomQuery: false,
      addrShow: false,
      city: {
        id: "",
        name: "",
      },
      date: null,
      countDesc: "",
      personNum: "2成人",
      childrenNum: "0儿童",
      price_lt: 4000,
      hotellevel_inList: [],
      hoteltype_inList: [],
      hotelasset_inList: [],
      hotelbrand_inList: [],
      markers: [],
      cityList: null,
      hotelList: [],
      optionsList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      personOptions: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
        {
          value: "6",
          label: "6",
        },
        {
          value: "7",
          label: "7",
        },
      ],
      childrenOptions: [
        {
          value: "0",
          label: "0",
        },
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
      ],
    };
  },
  computed: {
    hotellevel_inDesc() {
      let desc =
        this.hotellevel_inList.length > 1
          ? "已选" + this.hotellevel_inList.length + "项"
          : this.hotellevel_inList.length == 1
          ? this.hotellevel_inList[0].hotellevel_inName
          : "不限";
      return desc;
    },
    hoteltype_inDesc() {
      let desc =
        this.hoteltype_inList.length > 1
          ? "已选" + this.hoteltype_inList.length + "项"
          : this.hoteltype_inList.length == 1
          ? this.hoteltype_inList[0].hoteltype_inName
          : "不限";
      return desc;
    },
    hotelasset_inDesc() {
      let desc =
        this.hotelasset_inList.length > 1
          ? "已选" + this.hotelasset_inList.length + "项"
          : this.hotelasset_inList.length == 1
          ? this.hotelasset_inList[0].hotelasset_inName
          : "不限";
      return desc;
    },
    hotelbrand_inDesc() {
      let desc =
        this.hotelbrand_inList.length > 1
          ? "已选" + this.hotelbrand_inList.length + "项"
          : this.hotelbrand_inList.length == 1
          ? this.hotelbrand_inList[0].hotelbrand_inName
          : "不限";
      return desc;
    },
  },
  methods: {
    loadMap() {
      // 这里的代码有顺序
      window.onLoad = () => {
        // 地图库加载完毕的回调函数
        let map = new AMap.Map("container", {
          zoom: 21, //级别
          center: [113.32459, 23.10668], //中心点坐标
        });

        if (this.markers) {
          map.clearMap(); // 清除地图覆盖物

          this.markers.forEach(function (marker) {
            let mark = new AMap.Marker({
              map: map,
              icon: new AMap.Icon({
                image: marker.icon,
                size: new AMap.Size(38, 60), //图标大小
                imageSize: new AMap.Size(22, 36),
              }),
              position: [marker.position[0], marker.position[1]],
              extData: marker.extData,
            });
            // 设置覆盖物
            mark.setTop();
            // 显示一个提示窗
            const infoWin = new AMap.InfoWindow({
              content: `<span style="font-size:12px;color:#333;">${marker.title}</span>`,
              offset: new AMap.Pixel(0, -32),
            });
            // infoWin.open(map,mark.getPosition());
            // map.setCenter(mark.getPosition());
            mark.setLabel({
              content: marker.index,
            });

            // 给marker添加悬浮事件
            AMap.event.addListener(mark, "mouseover", function (e) {
              if (mark.getExtData() == e.target.Ce.extData) {
                infoWin.open(map, mark.getPosition());
                //map.setCenter(mark.getPosition());//设置中心点
              }
            });
            AMap.event.addListener(mark, "mouseout", function (e) {
              if (mark.getExtData() == e.target.Ce.extData) {
                infoWin.close(map, mark.getPosition());
                //map.setCenter(mark.getPosition());
              }
            });
          });
          // 让地图自适应显示所有点
          map.setFitView();
        }
      };
      //加载高德地图库
      // 动态创建script标签
      let url =
        "https://webapi.amap.com/maps?v=1.4.15&key=bcc76cc6df268f47e78f76e0cb9c03ed&callback=onLoad";
      let jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    },
    querySearch(querystring, callback) {
      this.$axios({
        url: "/airs/city",
        params: { name: querystring },
      }).then((res) => {
        const cityList = res.data.data.map((item) => {
          return {
            value: item.name.replace(/市$/, ""),
            id: item.id,
          };
        });
        // 处理如果不选择下拉建议的值
        if (cityList.length > 0) {
          this.city.id = cityList[0].id;
        }
        callback(cityList);
      });
    },
    setCity(selectVal) {
      this.city.id = selectVal.id;
    },
    changePerson(val) {
      this.personNum = val + "成人";
    },
    changeChild(val) {
      this.childNum = val + "儿童";
    },
    submitCountDesc() {
      this.countDesc = this.personNum + " " + this.childrenNum;
      this.showRoomQuery = false;
    },
    showOrHideRoompersonWapper() {
      this.showRoomQuery = !this.showRoomQuery;
    },
    loadOptions() {
      this.$axios({
        url: "/hotels/options",
      }).then((res) => {
        for (let key in res.data.data) {
          res.data.data[key] = res.data.data[key].map((item) => {
            return {
              ...item,
              isChoose: false,
            };
          });
        }
        this.optionsList = res.data.data;
      });
    },
    setPriceLt(val) {
      this.price_lt = val;
      this.getHotels();
    },
    setLevels(val) {
      if (this.hotellevel_inList.length > 0) {
        for (let i = 0; i < this.hotellevel_inList.length; i++) {
          if (this.hotellevel_inList[i].hotellevel_in == val.id) {
            this.optionsList.levels.forEach((item) => {
              if (item.id == val.id) {
                item.isChoose = false;
              }
            });
            // 删除
            this.hotellevel_inList.splice(i, 1);
            this.getHotels();
            return;
          }
        }
      }

      let hotellevel_ins = {
        hotellevel_in: val.id,
        hotellevel_inName: val.name,
      };
      this.optionsList.levels.forEach((item) => {
        if (item.id == val.id) {
          item.isChoose = true;
        }
      });
      this.hotellevel_inList.push(hotellevel_ins);
      this.getHotels();
    },
    setTypes(val) {
      if (this.hoteltype_inList.length > 0) {
        for (let i = 0; i < this.hoteltype_inList.length; i++) {
          if (this.hoteltype_inList[i].hoteltype_in == val.id) {
            this.optionsList.types.forEach((item) => {
              if (item.id == val.id) {
                item.isChoose = false;
              }
            });
            // 删除
            this.hoteltype_inList.splice(i, 1);
            this.getHotels();
            return;
          }
        }
      }

      let hoteltype_ins = {
        hoteltype_in: val.id,
        hoteltype_inName: val.name,
      };
      this.optionsList.types.forEach((item) => {
        if (item.id == val.id) {
          item.isChoose = true;
        }
      });
      this.hoteltype_inList.push(hoteltype_ins);
      this.getHotels();
    },
    setAssets(val) {
      if (this.hotelasset_inList.length > 0) {
        for (let i = 0; i < this.hotelasset_inList.length; i++) {
          if (this.hotelasset_inList[i].hotelasset_in == val.id) {
            this.optionsList.assets.forEach((item) => {
              if (item.id == val.id) {
                item.isChoose = false;
              }
            });
            // 删除
            this.hotelasset_inList.splice(i, 1);
            this.getHotels();
            return;
          }
        }
      }

      let hotelasset_ins = {
        hotelasset_in: val.id,
        hotelasset_inName: val.name,
      };
      this.optionsList.assets.forEach((item) => {
        if (item.id == val.id) {
          item.isChoose = true;
        }
      });
      this.hotelasset_inList.push(hotelasset_ins);
      this.getHotels();
    },
    setBrands(val) {
      if (this.hotelbrand_inList.length > 0) {
        for (let i = 0; i < this.hotelbrand_inList.length; i++) {
          if (this.hotelbrand_inList[i].hotelbrand_in == val.id) {
            this.optionsList.brands.forEach((item) => {
              if (item.id == val.id) {
                item.isChoose = false;
              }
            });
            // 删除
            this.hotelbrand_inList.splice(i, 1);
            this.getHotels();
            return;
          }
        }
      }

      let hotelbrand_ins = {
        hotelbrand_in: val.id,
        hotelbrand_inName: val.name,
      };
      this.optionsList.brands.forEach((item) => {
        if (item.id == val.id) {
          item.isChoose = true;
        }
      });
      this.hotelbrand_inList.push(hotelbrand_ins);
      this.getHotels();
    },
    getCity() {
      this.$axios({
        url: "/cities",
        params: {
          name: this.city.name,
        },
      }).then((res) => {
        this.city.id = res.data.data[0].id;
        this.cityList = res.data.data;
        this.getHotels();
      });
    },
    getHotels() {
      this.loading = true;
      //参数拼接处理
      let paramsStr =
        "?city=" + this.cityList[0].id + "&price_lt=" + this.price_lt;
      if (this.date) {
        paramsStr += "&enterTime=" + this.date[0] + "&leftTime=" + this.date[1];
      }
      this.hotellevel_inList.forEach((item) => {
        paramsStr += "&hotellevel_in=" + item.hotellevel_in;
      });
      this.hoteltype_inList.forEach((item) => {
        paramsStr += "&hoteltype_in=" + item.hoteltype_in;
      });
      this.hotelasset_inList.forEach((item) => {
        paramsStr += "&hotelasset_in=" + item.hotelasset_in;
      });
      this.hotelbrand_inList.forEach((item) => {
        paramsStr += "&hotelbrand_in=" + item.hotelbrand_in;
      });

      if (this.pageIndex > 1) {
        // 修改路由
        this.$router.push("/hotel" + paramsStr + "&page=" + this.pageIndex);
        paramsStr += "&_start=" + (this.pageIndex - 1) * this.pageSize;
      }

      this.$axios({
        url: "/hotels" + paramsStr,
      }).then((res) => {
        this.total = res.data.total;
        this.hotelList = res.data.data.map((item) => {
          return {
            ...item,
            ranComment: Math.floor(Math.random() * 90) + 10,
            ranTravels: Math.floor(Math.random() * 90) + 10,
          };
        });
        // 取酒店坐标点
        // 添加前清空
        this.markers = [];
        this.hotelList.forEach((item, index) => {
          let obj = {
            icon: "https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png",
            title: item.name,
            content: "<div>" + item.name + "</div>",
            position: [item.location.longitude, item.location.latitude],
            index: index + 1, //数字标注
            extData: item.id,
          };
          this.markers.push(obj);
        });
        // 加载点标记
        this.loadMap();
        this.loading = false;
      });
    },
    getCityByIp() {
      this.$axios({
        url: "https://restapi.amap.com/v3/ip",
        params: {
          key: "829ed92b9947deb02e2da860197db068",
        },
      }).then((res) => {
        this.$message.info(res.data.city);
        this.city.name = res.data.city.replace(/市$/, "");
        this.$router.push("/hotel?cityName=" + this.city.name);
        this.getCity();
      });
    },
    clearHotelQuery() {
      // 重置选项
      for (let key in this.optionsList) {
        this.optionsList[key].forEach((item) => {
          item.isChoose = false;
        });
      }
      this.price_lt = 4000;
      this.hotellevel_inList = [];
      this.hoteltype_inList = [];
      this.hotelasset_inList = [];
      this.hotelbrand_inList = [];
      this.getHotels();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getHotels();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getHotels();
    },
    changeAddrStyle($event) {
      if (!this.addrShow) {
        this.$refs.addr.style.height = "auto";
        $event.target.style.transform = "rotate(270deg)";
        this.addrShow = true;
      } else {
        this.$refs.addr.style.height = "40px";
        $event.target.style.transform = "rotate(90deg)";
        this.addrShow = false;
      }
    },
  },
  mounted() {
    //this.getCityByIp();
    this.loadOptions();
  },
  created() {
    this.getCityByIp();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;
}
.crumbs {
  font-size: 13px;
  color: #303133;
}
.query-price {
  margin: 20px 0;
  .el-col {
    &:nth-child(2) {
      //padding-left: 14px;
      text-align: center;
    }
    &:last-child {
      padding-left: 16px;
    }
  }
}
.areaWapper {
  font-size: 14px;
  color: #666666;
  .area-top {
    .area {
      .el-col {
        &:last-child {
          padding-left: 20px;
        }
      }
      .addr {
        height: 40px;
        overflow: hidden;
        .addr-item {
          margin-right: 18px;
        }
      }
      .swtch {
        margin-top: 6px;
        .el-icon-d-arrow-right {
          margin-right: 5px;
          color: #ff9d4a;
          transform: rotate(90deg);
          cursor: pointer;
        }
      }
    }
    .price {
      margin-top: 20px;
      .el-col {
        &:first-child {
          span {
            display: inline-block;
            width: 15px;
            height: 15px;
            text-align: center;
            line-height: 15px;
            color: #fff;
            background-color: #cccccc;
            border-radius: 50%;
            transform: translate(2px, -10px);
          }
        }
        &:last-child {
          .evaluate {
            margin-right: 24px;
            .iconhuangguan {
              color: #ff9300;
            }
            b {
              font-weight: 400;
              color: #666666;
            }
          }
        }
      }
    }
  }
  .mapWapper {
    .map {
      width: 407px;
      height: 260px;
    }
  }
}
.chooseWapper {
  box-sizing: border-box;
  width: 100%;
  height: 80px;
  margin-top: 20px;
  padding: 5px 0;
  border: 1px solid #dddddd;
  .el-col {
    height: 100%;
    padding: 8px 20px;
    color: #666666;
    font-size: 14px;
    border-right: 1px solid #dddddd;
    &:last-child {
      padding: 0;
      border-right: 0;
      text-align: center;
      line-height: 70px;
    }
    .desc {
      margin-bottom: 8px;
      b {
        font-weight: 400;
      }
    }
    .options {
    }
  }
}
.hotelWapper {
  .hotel-item {
    display: flex;
    padding: 24px 0;
    border-bottom: 1px solid #eeeeee;
    .pic {
      width: 380px;
      height: 200px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .desc {
      width: 100%;
      padding-left: 20px;
      .hotel-desc {
        padding: 5px 0;
        h1 {
          font-size: 24px;
          font-weight: 400;
          cursor: pointer;
        }
        .eng {
          font-size: 14px;
          color: #999999;
          .type {
            color: #ff9300;
            b {
              font-weight: 400;
              color: #999999;
            }
          }
        }
        .evaluate {
          display: flex;
          justify-content: flex-start;
          margin: 14px 0 20px;
          b {
            font-weight: 400;
            font-size: 16px;
            color: #ff9300;
          }
          span {
            margin-left: 50px;
            font-size: 16px;
            color: #000;
            em {
              color: #ff9300;
              font-style: normal;
              margin-right: 5px;
            }
          }
        }
        .location {
          font-size: 14px;
          color: #666666;
          i {
            font-size: 18px;
          }
        }
      }
      .link {
        margin-top: 25px;
        width: 234px;
        .hotel-link {
          width: 100%;
          height: 46px;
          line-height: 46px;
          font-size: 14px;
          color: #5f6266;
          border-bottom: 1px solid #eaeef5;
          &:hover {
            background-color: #f5f7fa;
          }
          span {
            padding-left: 15px;
          }
          em {
            padding-right: 15px;
            font-style: normal;
            b {
              color: #ff9300;
              font-weight: 400;
              font-size: 18px;
            }
            i {
            }
          }
        }
      }
    }
  }
}
.ra {
  position: relative;
}
.roompersonWapper {
  position: absolute;
  left: 0;
  top: 50px;
  width: 324px;
  height: 122px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  z-index: 99;
  border-radius: 5px;
  //border:1px solid pink;
  .select {
    height: 60px;
    line-height: 60px;
    padding: 0 12px;
    font-size: 12px;
    color: #5f6266;
    border-bottom: 1px solid #dddddd;
    span {
      font-size: 14px;
    }
  }
  .btnWapper {
    height: 62px;
    width: 100%;
    line-height: 62px;
    text-align: right;
    padding-right: 12px;
  }
}
.no-content {
  text-align: center;
  font-size: 14px;
  color: #c0c0c0;
  padding: 20px 0;
}
.page-box {
  padding: 20px 20px 20px 0;
}
/deep/.el-rate__icon {
  font-size: 24px;
}
/deep/.el-icon-star-off {
  font-size: 20px;
}
/deep/.el-icon-user {
  font-size: 20px;
}
/deep/.el-select {
  width: 95px;
}
/deep/.el-dropdown-link {
  width: 125px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  b {
    font-weight: 400;
  }
}
.dropdown {
  max-height: 230px;
  overflow: auto;
}
#container /deep/.amap-marker-label {
  border: 0;
  background: transparent;
}
#container /deep/.amap-marker-label {
  width: 22px;
  border: 0 none;
  background: transparent;
  text-align: center;
  //padding:0 5px 0 4px;
  line-height: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 450;
  transform: translate(-3px, -2px); //平移
}
</style>